<style scoped lang="less">
	@import "suggest-list";
</style>
<template>
	<div>
		<Row>
			<Col span="24">
				<Card style="margin-bottom: 10px">
					<Form inline>
						<FormItem style="margin-bottom: 0">
							<Select v-model="searchConf.status" clearable placeholder="请选择状态" style="width:100px">
								<Option v-for="item in statusList" :value="item.value">{{item.name}}</Option>
							</Select>
						</FormItem>
						<FormItem style="margin-bottom: 0">
							<Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
						</FormItem>
					</Form>
				</Card>
			</Col>
		</Row>
		<Row>
			<Col span="24">
				<Card>
					<div>
						<Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
					</div>
					<div class="margin-top-15" style="text-align: center">
						<Page :total="tableShow.listCount" :current="tableShow.currentPage"
						      :page-size="tableShow.pageSize" @on-change="changePage"
						      @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
					</div>
				</Card>
			</Col>
		</Row>
		<Modal v-model="show" width="668" :styles="{top: '30px'}">
			<div  v-if="itemData!=null" class="item-info-container">
				<div class="cell-item">
					<div class="cell-title">用户头像</div>
					<div class="cell-content">
						<img class="head-img" :src="itemData.userInfo.head_img">
					</div>
				</div>
				<div class="cell-item">
					<div class="cell-title">昵称</div>
					<div class="cell-content">{{itemData.userInfo.nickname}}</div>
				</div>
				<div class="cell-item">
					<div class="cell-title">日期</div>
					<div class="cell-content">{{itemData.create_time}}</div>
				</div>
				<div class="cell-item">
					<div class="cell-title">内容</div>
					<div class="cell-content">{{itemData.content}}</div>
				</div>
				<div class="cell-item">
					<div class="cell-title">图片</div>
					<div class="cell-content" v-if="itemData.imgs!=null">
						<img @click="showImg(GLOBAL.getUrl(img))" class="item-img" :src="GLOBAL.getUrl(img,true)"
						     v-for="img in itemData.imgs">
					</div>
				</div>
			
			</div>
			<div slot="footer">
				<div v-if="itemData!=null&&itemData.status===status_un_solve">
					<Button :loading="loading" type="primary" @click="changeStatus(status_resolved)">标记为已处理</Button>
					<Button :loading="loading" type="default" @click="changeStatus(status_ignore)">忽略</Button>
				</div>
				<Button :loading="loading" v-if="show&&itemData!=null&&itemData.status===status_resolved" type="primary"
				        @click="changeStatus(status_un_solve)">标记为未处理
				</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
  //状态：0已提交 5已处理 10忽略
  const STATUS_UN_SOLVE = 0;
  const STATUS_RESOLVED = 5;
  const STATUS_IGNORE = 10;
  import {getList, del, get, changeStatus} from '@/api/suggest'


  let _this = null;
  const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要删除这条数据吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          del(currentRow.id).then(response => {
            vm.tableData.splice(index, 1);
            vm.$Message.success(response.data.msg)
          });
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          size: 'small',
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, '删除')
    ])
  };
  const img = (vm, h, imgs, index) => {
    let imgDoms = [];
    if (imgs != null) {
      imgs.forEach(v => {
        imgDoms.push(h('img', {
          style: {
            width: '36px',
            padding: '3px'
          },
          attrs: {
            src: vm.GLOBAL.getUrl(v, false, true)
          },
        }))
      })
    }
    return imgDoms;

  };
  const viewButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        size: 'small',
        type: 'default'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.id = currentRow.id;
          vm.getDetail();
          vm.show = true;
        }
      }
    }, '查看')
  };
  export default {
    name: 'complain-list',
    data() {
      return {
        statusList: [{name: '待处理', value: STATUS_UN_SOLVE}, {name: '已处理', value: STATUS_RESOLVED}, {
          name: '已忽略',
          value: STATUS_IGNORE
        }],
        status_un_solve: STATUS_UN_SOLVE,
        status_resolved: STATUS_RESOLVED,
        status_ignore: STATUS_IGNORE,
        show: false,
        loading: false,
        id: -1,
        itemData: null,
        columnsList: [
          {
            title: '序号',
            type: 'index',
            width: 65,
            align: 'center'
          },
          {
            title: '状态',
            align: 'center',
            render: (h, params) => {
              return h('span', _this.getStatusStr(params.row.status))
            },
            width: 100
          },
          {
            title: '内容',
            align: 'center',
            key: 'content',
            width: 220
          },
          {
            title: '图片',
            align: 'center',
            render: (h, params) => {
              return h('div',
                {
                  style: {
                    display: 'flex'
                  }
                },
                img(_this, h, params.row.imgs, params.index)
              )
            },
            width: 220
          },
          {
            title: '创建日期',
            align: 'center',
            key: 'create_time',
            width: 180
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                viewButton(_this, h, params.row, params.index),
                deleteButton(_this, h, params.row, params.index)
              ])
            }
          }
        ],
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        searchConf: {
          status: null
        },
      }
    },
    created() {
      _this = this;
      this.getList()

    },
    methods: {
      showImg(url){
        window.open(url, '_blank')
      },
      getDetail() {
        let vm = this;
        get(this.id).then(rep => {
          if (rep.data.data.imgs != null) {
            rep.data.data.imgs = JSON.parse(rep.data.data.imgs);
          }
          vm.itemData = rep.data.data;
        })
      },
      changeStatus(status) {
        let vm = this;
        vm.loading = true;
        changeStatus(this.id, status).then(rep => {
          vm.loading = false;
          vm.show = false;
          vm.getList();
        }, error => {
          vm.loading = false;
        });
      },
      getStatusStr(status) {
        for (let i = 0; i < this.statusList.length; i++) {
          if (status === this.statusList[i].value) {
            return this.statusList[i].name;
          }
        }
        return '';
      },
      changePage(page) {
        this.tableShow.currentPage = page;
        this.getList()
      },
      changeSize(size) {
        this.tableShow.pageSize = size;
        this.getList()
      },
      search() {
        this.tableShow.currentPage = 1;
        this.getList()
      },
      getList() {
        let vm = this;
        let params = {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          status: vm.searchConf.status
        };
        getList(params).then(response => {
          if (response.data.data.list != null) {
            response.data.data.list.forEach(v => {
              if (v.imgs != null) {
                v.imgs = JSON.parse(v.imgs);
              }
            });
            vm.tableData = response.data.data.list
          } else {
            vm.tableData = [];
          }

          vm.tableShow.listCount = response.data.data.count
        })
      }
    }
  }
</script>
